<template>
  <div class="space-y-6">
    <div class="card">
      <div class="p-6 border-b border-gray-100">
        <h3 class="font-semibold text-lg">站点筛选</h3>
      </div>
      <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">站点名称</label>
          <input type="text" class="form-input" placeholder="请输入站点名称" v-model="filters.name">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">站点状态</label>
          <select class="form-input" v-model="filters.status">
            <option value="">全部状态</option>
            <option value="online">已上线</option>
            <option value="draft">草稿</option>
            <option value="review">审核中</option>
            <option value="expired">已过期</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">创建时间</label>
          <input type="date" class="form-input" v-model="filters.date">
        </div>
      </div>
      <div class="p-6 border-t border-gray-100 flex justify-end gap-3">
        <button class="btn btn-secondary" @click="resetFilters">
          <i class="fa fa-refresh"></i>
          <span>重置</span>
        </button>
        <button class="btn btn-primary" @click="searchSites">
          <i class="fa fa-search"></i>
          <span>搜索</span>
        </button>
      </div>
    </div>
    
    <div class="card">
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead>
            <tr class="bg-gray-50">
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">站点名称</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">域名</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模板</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="site in filteredSites" :key="site.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div :class="site.iconBg" class="w-8 h-8 rounded flex items-center justify-center mr-3">
                    <i class="fa" :class="site.iconClass"></i>
                  </div>
                  <div>
                    <div class="font-medium text-gray-900">{{ site.name }}</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ site.domain }}</div>
                <div v-if="site.subdomain" class="text-xs text-gray-500">系统二级域名</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ site.template }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="site.statusBadge" class="badge">{{ site.statusText }}</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ site.createTime }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <div class="flex justify-end gap-2">
                  <button class="text-primary hover:text-primary/80" title="编辑" @click="editSite(site.id)">
                    <i class="fa fa-pencil"></i>
                  </button>
                  <button class="text-gray-500 hover:text-gray-700" title="预览">
                    <i class="fa fa-eye"></i>
                  </button>
                  <button class="text-gray-500 hover:text-gray-700" title="复制">
                    <i class="fa fa-copy"></i>
                  </button>
                  <button class="text-danger hover:text-danger/80" title="删除" @click="deleteSite(site.id)">
                    <i class="fa fa-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
            <tr v-if="filteredSites.length === 0">
              <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                没有找到匹配的站点，请尝试调整筛选条件
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="p-6 border-t border-gray-100 flex items-center justify-between">
        <div class="text-sm text-gray-500">
          显示 <span class="font-medium">{{ Math.min((currentPage-1)*pageSize + 1, totalSites) }}</span> 到 <span class="font-medium">{{ Math.min(currentPage*pageSize, totalSites) }}</span> 条，共 <span class="font-medium">{{ totalSites }}</span> 条记录
        </div>
        <div class="flex items-center gap-2">
          <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50" :disabled="currentPage === 1" @click="changePage(currentPage - 1)">
            <i class="fa fa-chevron-left text-xs"></i>
          </button>
          <button v-for="page in pageNumbers" :key="page" class="w-9 h-9 flex items-center justify-center rounded" :class="currentPage === page ? 'bg-primary text-white' : 'border border-gray-300 hover:bg-gray-50'" @click="changePage(page)">
            {{ page }}
          </button>
          <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50" :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)">
            <i class="fa fa-chevron-right text-xs"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 站点数据
const sites = reactive([
  { id: 1, name: '时尚服装商城', domain: 'www.fashion-shop.com', subdomain: false, template: '电商标准版', status: 'online', statusText: '已上线', statusBadge: 'bg-success/10 text-success', createTime: '2023-05-12', iconClass: 'fa-shopping-bag text-primary', iconBg: 'bg-blue-100' },
  { id: 2, name: '科技有限公司官网', domain: 'www.techcorp.com', subdomain: false, template: '企业官网版', status: 'online', statusText: '已上线', statusBadge: 'bg-success/10 text-success', createTime: '2023-04-28', iconClass: 'fa-building text-success', iconBg: 'bg-green-100' },
  { id: 3, name: '教育培训平台', domain: 'eduplatform.site123.com', subdomain: true, template: '教育机构版', status: 'draft', statusText: '草稿', statusBadge: 'bg-gray-100 text-gray-600', createTime: '2023-06-01', iconClass: 'fa-graduation-cap text-purple-600', iconBg: 'bg-purple-100' },
  { id: 4, name: '餐饮美食店', domain: 'delicious-food.site123.com', subdomain: true, template: '餐饮店铺版', status: 'review', statusText: '审核中', statusBadge: 'bg-warning/10 text-warning', createTime: '2023-06-10', iconClass: 'fa-cutlery text-orange-500', iconBg: 'bg-orange-100' },
  { id: 5, name: '旅游博客', domain: 'travel-diary.com', subdomain: false, template: '个人博客版', status: 'expired', statusText: '已过期', statusBadge: 'bg-danger/10 text-danger', createTime: '2023-03-15', iconClass: 'fa-plane text-blue-400', iconBg: 'bg-blue-50' }
])

// 筛选条件
const filters = reactive({
  name: '',
  status: '',
  date: ''
})

// 分页
const currentPage = ref(1)
const pageSize = ref(3)

// 筛选站点
const filteredSites = computed(() => {
  return sites.filter(site => {
    const matchesName = site.name.toLowerCase().includes(filters.name.toLowerCase())
    const matchesStatus = !filters.status || site.status === filters.status
    // 简化日期筛选，实际项目中需要更复杂的日期比较
    const matchesDate = !filters.date || site.createTime.includes(filters.date.split('-').slice(0, 2).join('-'))
    
    return matchesName && matchesStatus && matchesDate
  })
})

// 总记录数
const totalSites = computed(() => filteredSites.value.length)

// 总页数
const totalPages = computed(() => Math.ceil(totalSites.value / pageSize.value))

// 页码列表
const pageNumbers = computed(() => {
  return Array.from({ length: totalPages.value }, (_, i) => i + 1)
})

// 重置筛选条件
const resetFilters = () => {
  filters.name = ''
  filters.status = ''
  filters.date = ''
  currentPage.value = 1
}

// 搜索站点
const searchSites = () => {
  currentPage.value = 1
  // 实际项目中这里会调用API
}

// 切换页码
const changePage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}

// 编辑站点
const editSite = (id) => {
  router.push(`/site-settings?id=${id}`)
}

// 删除站点
const deleteSite = (id) => {
  if (confirm('确定要删除这个站点吗？此操作不可恢复。')) {
    const index = sites.findIndex(site => site.id === id)
    if (index !== -1) {
      sites.splice(index, 1)
    }
  }
}
</script>

<style scoped>
</style>
